<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted } from 'vue'
import '@fortawesome/fontawesome-free/css/all.min.css'
import { VideoCamera } from '@element-plus/icons-vue'

const props = defineProps<{
  videoUrl: string
}>()

const videoRef = ref<HTMLVideoElement | null>(null)
const isPlaying = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const volume = ref(1)
const isMuted = ref(false)
const isFullscreen = ref(false)

// 播放/暂停
const togglePlay = () => {
  if (videoRef.value) {
    if (isPlaying.value) {
      videoRef.value.pause()
    } else {
      videoRef.value.play()
    }
    isPlaying.value = !isPlaying.value
  }
}

// 更新进度条
const updateProgress = () => {
  if (videoRef.value) {
    currentTime.value = videoRef.value.currentTime
    duration.value = videoRef.value.duration
  }
}

// 跳转到指定时间
const seek = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (videoRef.value) {
    const time = (parseFloat(target.value) / 100) * duration.value
    videoRef.value.currentTime = time
  }
}

// 音量控制
const setVolume = (event: Event) => {
  const target = event.target as HTMLInputElement
  if (videoRef.value) {
    const newVolume = parseFloat(target.value)
    volume.value = newVolume
    videoRef.value.volume = newVolume
    // 如果音量大于0，取消静音
    if (newVolume > 0 && isMuted.value) {
      isMuted.value = false
      videoRef.value.muted = false
    }
    // 如果音量为0，自动静音
    if (newVolume === 0 && !isMuted.value) {
      isMuted.value = true
      videoRef.value.muted = true
    }
  }
}

// 静音切换
const toggleMute = () => {
  if (videoRef.value) {
    isMuted.value = !isMuted.value
    videoRef.value.muted = isMuted.value
    // 如果是静音，保存当前音量并设置为0
    if (isMuted.value) {
      volume.value = 0
      videoRef.value.volume = 0
    } else {
      // 如果取消静音，恢复之前的音量
      volume.value = 1
      videoRef.value.volume = 1
    }
  }
}

// 格式化时间
const formatTime = (time: number) => {
  const minutes = Math.floor(time / 60)
  const seconds = Math.floor(time % 60)
  return `${minutes}:${seconds.toString().padStart(2, '0')}`
}

// 切换全屏
const toggleFullscreen = () => {
  if (!document.fullscreenElement) {
    videoRef.value?.requestFullscreen()
    isFullscreen.value = true
  } else {
    document.exitFullscreen()
    isFullscreen.value = false
  }
}

// 监听全屏变化
const handleFullscreenChange = () => {
  isFullscreen.value = !!document.fullscreenElement
}

// 组件挂载时添加全屏变化监听
onMounted(() => {
  document.addEventListener('fullscreenchange', handleFullscreenChange)
})

// 组件卸载时移除监听
onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullscreenChange)
})

// 监听视频源变化
watch(() => props.videoUrl, (newUrl) => {
  if (videoRef.value) {
    videoRef.value.load()
    isPlaying.value = false
    currentTime.value = 0
  }
})
</script>

<template>
  <div class="video-player">
    <template v-if="videoUrl">
      <video
        ref="videoRef"
        class="video-element"
        :src="videoUrl"
        @timeupdate="updateProgress"
        @loadedmetadata="updateProgress"
      ></video>
      
      <div class="controls">
        <button @click="togglePlay" class="control-btn play-btn">
          <i :class="['fas', isPlaying ? 'fa-pause' : 'fa-play']"></i>
        </button>
        
        <div class="progress-container">
          <span class="time">{{ formatTime(currentTime) }}</span>
          <input
            type="range"
            class="progress-bar"
            :value="(currentTime / duration) * 100"
            @input="seek"
            min="0"
            max="100"
          />
          <span class="time">{{ formatTime(duration) }}</span>
        </div>
        
        <div class="volume-container">
          <button @click="toggleMute" class="control-btn volume-btn">
            <i :class="['fas', isMuted ? 'fa-volume-mute' : 'fa-volume-up']"></i>
          </button>
          <input
            type="range"
            class="volume-slider"
            v-model="volume"
            @input="setVolume"
            min="0"
            max="1"
            step="0.1"
          />
        </div>

        <button @click="toggleFullscreen" class="control-btn fullscreen-btn">
          <i :class="['fas', isFullscreen ? 'fa-compress' : 'fa-expand']"></i>
        </button>
      </div>
    </template>
    <template v-else>
      <div class="no-video">
        <div class="tech-circle">
          <div class="circle-inner">
            <el-icon class="video-icon"><VideoCamera /></el-icon>
          </div>
          <div class="circle-outer"></div>
          <div class="circle-pulse"></div>
        </div>
        <div class="no-video-text">
          <h2>请选择视频</h2>
          <p>等待视频加载中...</p>
        </div>
        <div class="tech-lines">
          <div class="line"></div>
          <div class="line"></div>
          <div class="line"></div>
        </div>
      </div>
    </template>
  </div>
</template>

<style scoped lang="css">
.video-player {
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.video-element {
  width: 100%;
  height: calc(100% - 50px);
  object-fit: contain;
  background: #000;
}

.controls {
  height: 50px;
  padding: 10px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7));
  display: flex;
  align-items: center;
  gap: 15px;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.control-btn {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.control-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.control-btn:active {
  transform: scale(0.95);
}

.control-btn i {
  font-size: 16px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.progress-container {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 5px;
}

.progress-bar {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.progress-bar:hover {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
}

.progress-bar::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.progress-bar::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.time {
  color: #fff;
  font-size: 14px;
  font-family: monospace;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  min-width: 45px;
  text-align: center;
}

.volume-container {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 5px;
}

.volume-slider {
  width: 80px;
  height: 4px;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  outline: none;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.volume-slider:hover {
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* 添加控制栏显示/隐藏动画 */
.video-player:hover .controls {
  opacity: 1;
}

.controls {
  opacity: 0;
}

/* 添加按钮点击波纹效果 */
.control-btn {
  position: relative;
  overflow: hidden;
}

.control-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1, 1) translate(-50%);
  transform-origin: 50% 50%;
}

.control-btn:active::after {
  animation: ripple 0.6s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(0, 0);
    opacity: 0.5;
  }
  100% {
    transform: scale(20, 20);
    opacity: 0;
  }
}

/* 调整播放按钮图标位置 */
.play-btn i {
  margin-left: 2px;
}

/* 调整音量图标大小 */
.volume-btn i {
  font-size: 14px;
}

/* 调整全屏图标大小 */
.fullscreen-btn i {
  font-size: 14px;
}

.no-video {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  position: relative;
  overflow: hidden;
}

.tech-circle {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-inner {
  width: 60px;
  height: 60px;
  background: rgba(0, 242, 255, 0.1);
  border: 2px solid rgba(0, 242, 255, 0.3);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}

.video-icon {
  font-size: 30px;
  color: rgba(0, 242, 255, 0.8);
  animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

.circle-outer {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid rgba(0, 242, 255, 0.2);
  border-radius: 50%;
  animation: rotate 10s linear infinite;
}

.circle-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 242, 255, 0.1);
  animation: pulse 2s ease-out infinite;
}

.no-video-text {
  text-align: center;
  color: #fff;
  z-index: 2;
}

.no-video-text h2 {
  font-size: 24px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #fff, #64ffda);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(100, 255, 218, 0.3);
}

.no-video-text p {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.7);
}

.tech-lines {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.tech-lines .line {
  position: absolute;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: scan 3s linear infinite;
}

.tech-lines .line:nth-child(1) {
  top: 20%;
  animation-delay: 0s;
}

.tech-lines .line:nth-child(2) {
  top: 50%;
  animation-delay: 1s;
}

.tech-lines .line:nth-child(3) {
  top: 80%;
  animation-delay: 2s;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0% {
    transform: scale(0.8);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.2);
    opacity: 0;
  }
}

@keyframes scan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
</style>